<script setup lang="ts">
import { ref } from "vue";
import TheHeader from "../components/TheHeader.vue";

const products = [
  {
    title: "云服务器",
    description: "安全稳定、弹性伸缩的云端计算服务",
    icon: "🖥️",
    link: "/products/cvm",
  },
  {
    title: "云数据库",
    description: "稳定可靠、安全运行的数据库服务",
    icon: "💾",
    link: "/products/database",
  },
  {
    title: "云存储",
    description: "安全、稳定、高效的云端存储服务",
    icon: "📦",
    link: "/products/storage",
  },
  {
    title: "云安全",
    description: "全方位的云安全防护解决方案",
    icon: "🔒",
    link: "/products/security",
  },
  {
    title: "人工智能",
    description: "领先的AI技术与服务平台",
    icon: "🤖",
    link: "/products/ai",
  },
  {
    title: "云网络",
    description: "高性能、可靠的网络服务",
    icon: "🌐",
    link: "/products/network",
  },
];

const hotProducts = [
  {
    title: "CVM高性价比峰驰型 算力成本低至0.09元/小时",
    tag: "精选特惠",
    link: "/products/cvm-special",
  },
  {
    title: "轻量云·游戏服特惠专场",
    tag: "拼团购",
    link: "/products/lighthouse-game",
  },
  {
    title: "DeepSeek 上架！轻松部署大模型",
    tag: "热荐",
    link: "/products/deepseek",
  },
];

const solutions = [
  {
    title: "游戏解决方案",
    description: "为游戏行业提供全面的云服务支持",
    image:
      "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/solution-game.jpg",
  },
  {
    title: "金融解决方案",
    description: "为金融行业提供安全合规的云服务",
    image:
      "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/solution-finance.jpg",
  },
  {
    title: "医疗解决方案",
    description: "助力医疗行业数字化转型",
    image:
      "https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/solution-medical.jpg",
  },
];

const quickLinks = [
  { icon: "app", text: "热门推荐", link: "/recommend" },
  { icon: "chart-bubble", text: "计算", link: "/compute" },
  { icon: "code", text: "容器与中间件", link: "/container" },
  { icon: "server", text: "存储", link: "/storage" },
  { icon: "database", text: "数据库", link: "/database" },
  { icon: "internet", text: "网络", link: "/network" },
  { icon: "play-circle", text: "CDN与边缘", link: "/cdn" },
  { icon: "video", text: "视频服务", link: "/video" },
  { icon: "secured", text: "安全", link: "/security" },
  { icon: "shop", text: "人工智能与机器学习", link: "/ai" },
  { icon: "root-list", text: "开发与运维", link: "/devops" },
  { icon: "link", text: "云通信与企业服务", link: "/communication" },
  { icon: "user-circle", text: "办公协同", link: "/office" },
  { icon: "view-module", text: "微信生态", link: "/wechat" },
  { icon: "internet", text: "物联网", link: "/iot" },
  { icon: "chart", text: "行业应用", link: "/industry" },
  { icon: "service", text: "服务与营销", link: "/service" },
];
</script>

<template>
  <div class="home">
    <!-- Header -->
     <TheHeader/>
    <!-- <t-header height="64px" class="header">
      <div class="header-content">
        <div class="logo">
          <img
            src="https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/3aa8d06f-3701-4b16-b1a2-68a0c40d8a97.svg"
            alt="Tencent Cloud"
          />
        </div>
        <t-menu mode="horizontal">
          <t-menu-item value="products">产品</t-menu-item>
          <t-menu-item value="solutions">解决方案</t-menu-item>
          <t-menu-item value="pricing">定价</t-menu-item>
          <t-menu-item value="docs">文档</t-menu-item>
          <t-menu-item value="about">关于我们</t-menu-item>
        </t-menu>
        <div class="header-right">
          <t-button theme="primary">免费体验</t-button>
        </div>
      </div>
    </t-header> -->

    <!-- Hero Section -->
    <div class="hero">
      <div class="hero-content">
        <div class="hero-left">
          <div class="hot-products">
            <div
              v-for="product in hotProducts"
              :key="product.title"
              class="hot-product-item"
            >
              <span
                class="tag"
                :class="product.tag === '热荐' ? 'tag-hot' : ''"
                >{{ product.tag }}</span
              >
              <span class="title">{{ product.title }}</span>
            </div>
          </div>
          <div class="hero-main">
            <h1>云官网建站</h1>
            <p>
              私有服务器自动部署，网站搭建更简单，无需代码，人人都会搭建网站
            </p>
            <t-button theme="primary" size="large">立即选购</t-button>
          </div>
        </div>
        <div class="hero-right">
          <img
            src="https://cloudcache.tencent-cloud.com/qcloud/ui/static/static_source_business/hero-image.png"
            alt="Hero"
          />
        </div>
      </div>
    </div>

    <!-- Quick Links -->
    <div class="quick-links">
      <div class="quick-links-content">
        <t-row :gutter="[16, 16]">
          <t-col :span="3" v-for="link in quickLinks" :key="link.text">
            <div class="quick-link-item">
              <t-icon :name="link.icon" />
              <span>{{ link.text }}</span>
            </div>
          </t-col>
        </t-row>
      </div>
    </div>

    <!-- Products Section -->
    <div class="section products-section">
      <div class="section-content">
        <div class="section-header">
          <h2>核心产品</h2>
          <t-button theme="default" variant="text">查看全部产品 ></t-button>
        </div>
        <div class="product-grid">
          <t-card
            v-for="product in products"
            :key="product.title"
            :bordered="true"
            hover-shadow
          >
            <template #title>
              <div class="product-title">
                <span class="product-icon">{{ product.icon }}</span>
                {{ product.title }}
              </div>
            </template>
            <template #description>{{ product.description }}</template>
            <template #actions>
              <t-button theme="primary" variant="text">了解更多 →</t-button>
            </template>
          </t-card>
        </div>
      </div>
    </div>

    <!-- Solutions Section -->
    <div class="section solutions-section">
      <div class="section-content">
        <div class="section-header">
          <h2>行业解决方案</h2>
          <t-button theme="default" variant="text">查看更多解决方案 ></t-button>
        </div>
        <div class="solution-grid">
          <t-card
            v-for="solution in solutions"
            :key="solution.title"
            :cover="solution.image"
            :bordered="true"
            hover-shadow
          >
            <template #title>{{ solution.title }}</template>
            <template #description>{{ solution.description }}</template>
            <template #actions>
              <t-button theme="primary" variant="text">查看详情 →</t-button>
            </template>
          </t-card>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <div class="section features-section">
      <div class="section-content">
        <h2>为什么选择腾讯云</h2>
        <t-row :gutter="[24, 24]">
          <t-col :span="6">
            <div class="feature-item">
              <t-icon name="server" size="48px" />
              <h3>全球基础设施</h3>
              <p>覆盖全球的数据中心和网络节点</p>
            </div>
          </t-col>
          <t-col :span="6">
            <div class="feature-item">
              <t-icon name="shield" size="48px" />
              <h3>安全可靠</h3>
              <p>多重安全防护，保障业务稳定运行</p>
            </div>
          </t-col>
          <t-col :span="6">
            <div class="feature-item">
              <t-icon name="chart" size="48px" />
              <h3>弹性伸缩</h3>
              <p>按需扩展，灵活应对业务变化</p>
            </div>
          </t-col>
          <t-col :span="6">
            <div class="feature-item">
              <t-icon name="support" size="48px" />
              <h3>专业服务</h3>
              <p>7x24小时技术支持服务</p>
            </div>
          </t-col>
        </t-row>
      </div>
    </div>

    <!-- Footer -->
    <t-footer class="footer">
      <div class="footer-content">
        <t-row :gutter="[24, 24]">
          <t-col :span="6">
            <h4>产品与服务</h4>
            <t-space direction="vertical">
              <a href="#">云服务器</a>
              <a href="#">云数据库</a>
              <a href="#">云存储</a>
              <a href="#">人工智能</a>
            </t-space>
          </t-col>
          <t-col :span="6">
            <h4>解决方案</h4>
            <t-space direction="vertical">
              <a href="#">游戏</a>
              <a href="#">金融</a>
              <a href="#">医疗</a>
              <a href="#">教育</a>
            </t-space>
          </t-col>
          <t-col :span="6">
            <h4>支持与服务</h4>
            <t-space direction="vertical">
              <a href="#">文档中心</a>
              <a href="#">开发者社区</a>
              <a href="#">技术支持</a>
              <a href="#">联系我们</a>
            </t-space>
          </t-col>
          <t-col :span="6">
            <h4>关于腾讯云</h4>
            <t-space direction="vertical">
              <a href="#">公司简介</a>
              <a href="#">新闻动态</a>
              <a href="#">加入我们</a>
              <a href="#">合作伙伴</a>
            </t-space>
          </t-col>
        </t-row>
        <div class="footer-bottom">
          <p>Copyright © 2024 Tencent Cloud. All Rights Reserved.</p>
        </div>
      </div>
    </t-footer>
  </div>
</template>

<style lang="less" scoped>
.home {
  .header {
    position: fixed;
    width: 100%;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 100;

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 20px;

      .logo {
        margin-right: 40px;
        img {
          height: 32px;
        }
      }

      .header-right {
        margin-left: auto;
      }
    }
  }

  .hero {
    padding-top: 64px;
    background: linear-gradient(135deg, #0052d9 0%, #0594fa 100%);
    color: white;
    min-height: 600px;
    display: flex;
    align-items: center;

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 20px;
      display: flex;
      align-items: center;
      gap: 40px;
    }

    &-left {
      flex: 1;

      .hot-products {
        margin-bottom: 40px;

        .hot-product-item {
          background: rgba(255, 255, 255, 0.1);
          padding: 12px 20px;
          border-radius: 4px;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }

          .tag {
            background: #00a870;
            color: white;
            padding: 2px 8px;
            border-radius: 2px;
            font-size: 12px;
            margin-right: 12px;

            &.tag-hot {
              background: #ff4d4f;
            }
          }

          .title {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .hero-main {
        h1 {
          font-size: 48px;
          margin-bottom: 24px;
        }

        p {
          font-size: 20px;
          margin-bottom: 32px;
          opacity: 0.9;
        }
      }
    }

    &-right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 100%;
        height: auto;
      }
    }
  }

  .quick-links {
    background: white;
    padding: 24px 0;
    margin-bottom: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .quick-link-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #f5f5f5;
        color: var(--brand-color);
      }

      .t-icon {
        font-size: 20px;
      }

      span {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .section {
    padding: 80px 0;

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    &-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;

      h2 {
        font-size: 32px;
        margin: 0;
      }
    }
  }

  .products-section {
    background: white;

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;

      .product-title {
        display: flex;
        align-items: center;
        gap: 8px;

        .product-icon {
          font-size: 24px;
        }
      }
    }
  }

  .solutions-section {
    background: #f5f7fa;

    .solution-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
  }

  .features-section {
    background: white;

    h2 {
      text-align: center;
      font-size: 32px;
      margin-bottom: 48px;
    }

    .feature-item {
      text-align: center;
      padding: 32px;
      background: #f5f7fa;
      border-radius: 8px;
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-8px);
      }

      h3 {
        margin: 16px 0 8px;
        font-size: 20px;
      }

      p {
        color: #666;
        margin: 0;
      }
    }
  }

  .footer {
    background: #f5f7fa;
    padding: 64px 0 32px;

    &-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      h4 {
        font-size: 18px;
        margin-bottom: 24px;
        color: #333;
      }

      a {
        color: #666;
        text-decoration: none;
        &:hover {
          color: var(--brand-color);
        }
      }
    }

    &-bottom {
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid #e5e5e5;
      text-align: center;
      color: #666;
    }
  }
}

@media (max-width: 768px) {
  .home {
    .hero {
      &-content {
        flex-direction: column;
        padding: 40px 20px;
      }

      &-left {
        text-align: center;

        .hero-main {
          h1 {
            font-size: 36px;
          }

          p {
            font-size: 16px;
          }
        }
      }
    }

    .products-section,
    .solutions-section {
      .product-grid,
      .solution-grid {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
